<template>
  <div :style="{ padding: '35 0 0 0' }">     
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale" :padding="paddingCopy">
      <v-tooltip :crosshairs="crosshairs"/>
      <v-axis dataKey="countMonth" :label="labelAxis" :tickLine="tickLine" :line="tickLine"/>
      <v-axis dataKey="y" :grid="grid" :label="labelAxis"></v-axis>
      <v-legend position="top-right" :offset="[0, -15]"/>
      <v-line position="countMonth*y" :color="lineColor"/>
    </v-chart>
  </div>
</template>

<script>
  import { DataSet } from '@antv/data-set'
  import { triggerWindowResizeEvent } from '@/utils/util'

  export default {
    name: 'LineChartMultid',
    props: {
      title: {
        type: String,
        default: ''
      },
      dataSource: {
        type: Array,
        default: () => [
          { countMonth: '1月', jeecg: 7.0, jeebt: 3.9 },
          { countMonth: '2月', jeecg: 6.9, jeebt: 4.2 },
        ]
      },
      fields: {
        type: Array,
        default: () => []
      },
      aliases:{
        type: Array,
        default: () => []
      },
      height: {        
        default: 462
      },
      padding: {
        type: Array,
        default: () => ['70', '20', '30', '35']
      }
    },
    data() {
      return {        
        scale: [{
          dataKey: 'y',
          min: 0,
        }],
        style: { stroke: '#fff', lineWidth: 1 },        
        grid:{
          lineStyle: {
            lineWidth: 1,
            stroke: '#4658ce'
          }
        },
        labelAxis:{
          textStyle: {
            opacity: 1,
            fill: '#98baff'
          }
        },        
        tickLine: {
          stroke: '#4658ce'
        },
        crosshairs:{
          lineStyle: {
            stroke: '#fff',
            // strokeOpacity: '0.6'
          }
        },
        lineColor:['x',['#18d8ff', '#ffe431', '#45ee88']],
        paddingCopy: this.padding
      }
    },
    computed: {
      data() {
        const dv = new DataSet.View().source(this.dataSource)
        if(this.fields.length && this.aliases.length){
          dv.transform({
            type: 'fold',
            fields: this.fields,
            key: 'x',
            value: 'y'
          })
        }
        let rows =  dv.rows
        // 替换别名        
        if(this.fields.length && this.aliases.length){
            rows.forEach(row => {
            for (let item of this.aliases) {
              if (item.field === row.x) {
                row.x = item.alias
                break
              }
            }
          })
        }
        // 动态设置padding比例  
        this.resetPadding(rows)
        return rows
      }
    },
    methods: {
      resetPadding(list){
        if(!list || !list.length) return
        const arrs = list.map((value, index, array) => {
            return value.y
        })        
        let maxnum = Math.max(...arrs)  
        maxnum = String(maxnum)             
        const len = maxnum.length        
        const n = String(len * 11 + 5)
        this.paddingCopy.splice(3,1, n)
      }
    },
    mounted () {
      triggerWindowResizeEvent()
    },
  }
</script>

<style lang="less" scoped>
</style>